<template>
	<div class="dialog-wrap">
		<div class="dialog-detail">
			<img src="@/assets/img/close.png" class="close" @click="close">
			<div class="right">
				<div class="change-img">
					<el-upload
						name="image"
						:show-file-list="false"
						:action="action"
						:before-upload="beforeAvatarUpload"
						:on-success="handleAvatarSuccess"
						:data="uploadData"
						class="avatar-uploader"
					>
						<img :src='staticURL + userInfo.headimg' v-if='userInfo.headimg' class='bg_logo'/>
						<img src="@/assets/img/user-logo.png" class='bg_logo' v-else/>
						<div class="btn img-btn">更换图像</div>
					</el-upload>
					
				</div>
				
				<div class="opinion-info">
					<p>昵称</p>
					<el-input
					  type="text"
					  placeholder="请输入用户名"
					  v-model="userInfo.realname"
					  maxlength="20"
					  show-word-limit
					>
					</el-input>
				</div>
				
				<div class="opinion-info">
					<p>简介</p>
					<textarea rows="3" cols="20" placeholder="请输入简介" v-model="userInfo.desc"></textarea>
				</div>
				
				<div class="btn_wrap">
					<span class="btn" @click="close">暂不修改</span>
					<span class="btn" @click="handleSubmit">确定</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import utils from '@/assets/js/utils';
	import baseURL from '@/assets/js/basePath';
	import {
		updateInfo,
	} from '@/api/personal.js';
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				// userInfo: {
				// 	desc: "",
				// 	username: "",
				// 	heading:"",
				// 	headimg:""
				// }
			}
		},
		computed: {
			...mapState(['userInfo'])
		},

		created() {
			// this.userInfo.headimg = utils.getSession('headimg');
			this.getUserInfo()
		},
		
		computed:{
			action(){
				return baseURL + '/apiv2/user/upload'
			},
			uploadData(){
				return{
					token: utils.getSession('token')
				}
			},
			...mapState(['userInfo'])
		},

		methods: {
			...mapActions(['getUserInfo']),
			// async getUserInfo() {				
			// 	const {
			// 		data,
			// 		status
			// 	} = await userInfo({});
			// 	if (status !== 200) return;
			// 	if(data.code == 200){
			// 		this.userInfo = data?.data?.info || {};
			// 	}
			// 	else{
			// 		this.userInfo = {}
			// 		this.$message.warning(data && data.message || '获取数据失败');
			// 	}
			// },
			
			async handleSubmit() {
				if (!this.userInfo.realname) {
					this.$message("请输入用户昵称");
					return
				}
				const parmas = {
					desc: this.userInfo.desc,
					realname: this.userInfo.realname,
					headimg:this.userInfo.headimg
				}
				const {
					data,
					status
				} = await updateInfo(parmas);
				if (status !== 200) return;
				if (data.code == 200) {
					console.log(this,"Ffff")
					this.$message.success("更新成功");
					this.close()
				} else {
					this.$message.warning("更新失败");
				}
			},
			beforeAvatarUpload(file){

			},
			handleAvatarSuccess(res, file) {
				// this.headimg = URL.createObjectURL(file.raw);
				this.userInfo.headimg = res.data
			},
			close() {
				vm.isLoading = false;
				this.$emit('close');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.dialog-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		.dialog-detail {
			position: relative;
			width: 600px;
			background: #FFFFFF;
			border-radius: 10px;
			border: 1px solid #CCCCCC;
			display: flex;
			justify-content: space-between;
			overflow: auto;
			.left {
				.model-content{
					height:300px;
				}
				.content{
					padding: 15px 15px 0 15px;
					.personal-wrap{
						@include flex-row;
						justify-content: space-between;
						.personal{
							@include flex-row;
							img{
								display: block;
								width: 60px;
								height: 60px;
								border-radius: 50%;
								margin-right: 15px;
							}
							p{
								margin-bottom: 4px;
								font-size: 16px;
								color: #333333;
							}
							span{
								font-size: 12px;
								color: #999999;
							}
						}
						.art-style{
							font-size: 14px;
							color: #333333;
						}
					}
					@include prompt-wrap;
					h1{
						@include font-style;
						font-size: 16px;
						color: #333333;
						margin-bottom: 15px;
						position: relative;
						span{
							color:#FFC267
						}
					}
				}
			}

			.right {
				padding: 30px;
				width: 100%;
				overflow: auto;
				.tips{
					font-size: 12px;
					color: #999999;
				}
				.comment-info{
					margin: 20px 0;
					p{
						margin-bottom: 18px;
						font-size: 16px;
						color: #333333;
					}
					.content{
						margin-bottom: 18px;
						@include flex-row;
						div{
							margin-right: 16px;
							font-size: 12px;
							color: #999999;
						}
						span{
							@include cursor-style;
							margin-right: 12px;
							font-size: 12px;
							color: #333333;
							padding-left:24px;
							background:url("../assets/img/gou.png") no-repeat left center;
							background-size: 20px 20px;
						}
						.active{
							background:url("../assets/img/gou-active.png") no-repeat left center;
							background-size: 20px 20px;
						}
					}
				}
				
				.opinion-info{
					margin-bottom: 20px;
					p{
						margin-bottom: 18px;
						font-size: 16px;
						color: #333333;
					}
					textarea{
						width: 100%;
						height: 120px;
						padding: 10px 15px;
						background: #F0F3F4;
						border-radius: 10px 10px 10px 10px;
						border: 1px solid #CFDDE1;
					}
				}
				
				.refine-wrap {
					margin-bottom: 20px;
					p {
						margin-bottom: 10px;
					}
				
					div {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 4px;
						span {
							@include font-style;
							font-size: 14px;
						}
						.integral-label{
							color: #666666;
						}
						.integral-value{
							color: #333333;	
						}
					}
				}
				
				.btn_wrap {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20px;
				}
				.model-type{
					margin: 20px 0;
					p{
						margin-bottom: 18px;
						font-size: 16px;
						color: #333333;
					}
					.form-s{
						width: 82%;
						height: 44px;
						
						:deep(input){
							height: 44px;
							line-height: 44px;
							background: #F0F3F4;
							border: 1px solid #CFDDE1;
						}
						:deep(.el-tag--mini){
							height: 26px;
							line-height: 26px;
						}
					}
				}
				
				
			}

			.close {
				position: absolute;
				right: 30px;
				top: 20px;
				width: 20px;
				height: 20px;
				cursor: pointer;
			}
			.change-img{
				display: flex;
				flex-direction: column;
				align-items: center;
				.bg_logo{
					display: block;
					width: 60px;
					height: 60px;
					border-radius: 50%;
					cursor: pointer;
				}
				:deep(.el-upload){
					display:flex;
					flex-direction: column;
					align-items: center;
				}
			}
			.btn {
				width: 45%;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background: #FFC267;
				border-radius: 5px 5px 5px 5px;
				font-size: 16px;
				color: #FFFFFF;
				@include cursor-style;
			}
			.img-btn{
				height: 40px;
				line-height: 40px;
				width: 100px;
				margin-top: 20px;
			}
		}
	}

	
</style>
<style>
	.text-message{
		background: #FFFFFF;
		border-radius: 10px 10px 10px 10px;
		padding-bottom: 30px;
		.el-message-box__header{
			padding: 30px 20px 0 20px;
			.el-message-box__title{
				font-weight: 500;
				font-size: 18px;
				color: #333333;
			}
		}
		.el-message-box__content{
			padding: 20px 20px 16px 20px;
			.el-message-box__message{
				color: #666;
			}
		}
		
		
		button{
			width: 100%;
			height: 40px;
			line-height: 40px;
			padding: 0;
			border-radius: 5px;
		}
	}
</style>